<template>
	<view class="page">
		<view class="number">
			<u-number-box v-model="value">
				<view slot="minus" class="minus flex-center">
				——
				</view>
				<text slot="input" class="input flex-center">{{value}}</text>
				<view slot="plus" class="plus flex-center">
					+
				</view>
			</u-number-box>
			</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import navBar from "@/components/nav/index.vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				value: 0,
				indexList: [{
						id: '112',
						content: '乌梅子酱'
					},
					{
						id: '121',
						content: '乌梅子酱'
					},
					{
						id: '151',
						content: '乌梅子酱'
					},
					{
						id: '211',
						content: '乌梅子酱'
					}
				]
			};
		},
		onShow() {},
		methods: {
			scrolltolower(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
	}
	.number {
		width: 30%;
		height: 200px;
		background-color: #46C253;
		.u-number-box {
			width: 100%;
			height: 100%;
		}
		.minus {
			width: 66px;
			height: 66px;
			border-radius: 4px;
			opacity: 1;
			box-sizing: border-box;
			border: 4px solid #FFFFFF;
			font-size: 1rem;
			font-weight: bold;
			color: #fff;
		}
		.plus {
			width: 66px;
			height: 66px;
			border-radius: 4px;
			opacity: 1;
			box-sizing: border-box;
			border: 4px solid #FFFFFF;
			font-size: 3rem;
			font-weight: 100;
			color: #fff;
		}
		.input {
			width: 30%;
			height: 30%;
			margin: 0 2%;
			background-color: #FFFFFF;
		}
	}
	
</style>
